<template>
    <div class="friend">
        <toubu></toubu>
            <div class="new_friend" @click.stop="add_friend">
                <div class="myicon">
                    <div class="iconfont icon-friend_add myicon_inner"></div>
                </div>
                <div class="add_friend_message">新的好友</div>
            </div>

        <van-search v-model="value" placeholder="请输入搜索关键词"/>

            <div v-if="$store.state.friendList.length !== 0" class="better_scroll_wrapper" >
                <ul>
                    <li v-for="(item,index) in filterFriendList" :key="item.id" class="userlist" @click.stop="Friend_detail(item.toid)">
                        <div class="touxiang">
                            <img src="http://admin.xukunqi.com/public/static/headimage.png" width="43" height="43">
                        </div>
                        <div class="name_and_username">
                            <div class="name">
                                {{item.toName}}
                            </div>
                            <div class="username">
                                琪琪号：{{item.toid}}
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="block">

                </div>

            </div>

        <div v-else class="no_friend">
                暂无好友 快去添加好友吧
        </div>
        <dibu></dibu>
    </div>
</template>

<script>
    import Vue from 'vue';
    import toubu from '@/components/toubu';
    import dibu from '@/components/dibu';
    import {select_Friend} from "../../request/api";
    import {Toast,Search} from 'vant';
    import Cookies from 'js-cookie'

    Vue.use(Toast).use(Search);

    export default {
        name: "friend",
        components:{
            toubu,
            dibu,
        },
        data(){
          return{
              value:"",
          }
        },


        computed:{
            //过滤搜索用户
            filterFriendList(){
                console.log("过滤好友列表",this.$store.state.friendList)
                // return this.$store.state.friendList.filter(item => ((item.toName.toUpperCase().includes(this.value.toUpperCase())) || (item.toid.toUpperCase().includes(this.value.toUpperCase()))) && (!item.toid.toUpperCase().includes(Cookies.get('username').toUpperCase())));
                if(this.$store.state.friendList.length === 0){
                    return [];
                }else{
                    // return this.$store.state.friendList;
                    return this.$store.state.friendList.filter(item => ((item.toName.toUpperCase().includes(this.value.toUpperCase())) || (item.toid.toUpperCase().includes(this.value.toUpperCase()))) && (!item.toid.toUpperCase().includes(Cookies.get('username').toUpperCase())));
                }

            }
        },


        mounted(){
            // console.log("在friend中 啊啊啊啊啊",this.$store.state.friendList);
            // let data={
            //     "fromid":999
            // }
            // select_Friend(data).then(res=>{
            //     console.log("看看数据",res.data);
            //     if(res.data.length !== 0){
            //         console.log("不是空数组");
            //     }else{
            //         console.log("现在该答应这个啦")
            //     }
            // })
        },
        methods:{

            add_friend(){
                this.$router.push('/center/acceptFriend');
            },

            Friend_detail(toid){
                this.$router.push({path:'/center/friend_detail',query:{id:toid}});
            }
        }
    }
</script>

<style scoped>
    .friend{}
    .new_friend{width: calc(100% - 34px);height: 61px;margin: 0 auto;display: flex;flex-direction: row;background-color: #f8f8f8;border-radius: 10px;}
    .myicon{height: 44px;width: 44px;background-color: #fc9c3a;border-radius: 5px;margin-top: 9px;margin-left: 5px;}
    .myicon_inner{font-size: 24px;line-height: 44px;text-align: center;color: white;}
    .add_friend_message{font-size: 18px;line-height: 61px;margin-top: 2px;margin-left: 10px;}

    .userlist{height: 62px;width: calc(100% - 34px);margin: 15px auto;border-bottom: solid 1px #ececec;display: flex;flex-direction: row;position: relative;background-color: pink;border-radius: 15px;}
    .touxiang{width: 43px;height: 43px;margin-top: 10px;margin-left: 5px;}
    .name_and_username{margin-left: 10px;}
    .name{font-size: 15px;line-height: 15px;margin-top: 15px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 7px;}

    .block{width: 100%;height: 80px;}

    .no_friend{width: 100%;text-align: center;margin-top: 170px;color: #bfbfbf;}
</style>